<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>型号管理</title>
    <script src="../../static/bootstrap5.0.1/bootstrap5/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="../../static/bootstrap5.0.1/bootstrap5/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/layuiadmin/style/admin.css" media="all">
    <script src="../../static/layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../static/css/common.css">
    <style>
        .bx {
            margin-left: 50px;
            margin-top: 50px;
        }

        .layui-table-cell {
            height: 40px;
            line-height: 40px;
        }

        .layui-input-block {
            margin-left: 150px;
            min-height: 36px;
        }
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-inline tp">
        <div class="layui-form-item" style="margin-left: -110px;">
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入型号"
                       autocomplete="off" class="layui-input" id="product_model_search">
            </div>
        </div>
    </div>
    <!--    <div class="layui-inline">-->
    <!--        <label class="layui-form-label" style="width: auto;">日志创建时间</label>-->
    <!--        <div class="layui-input-inline">-->
    <!--            <input type="text" name="date" id="log_date_search" lay-verify="date" placeholder="yyyy-MM"-->
    <!--                   autocomplete="off"-->
    <!--                   class="layui-input">-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="layui-inline tp1">
        <div class="layui-form-item">
            <button id="searchconfig" class="btn btn-primary">搜索</button>
            <button id="datainit" class="btn btn-danger">新增</button>
            <button type="button" class="layui-btn demo-class-accept"
                    lay-options="{accept: 'file', exts: 'xlsx|xls'}">
                <i class="layui-icon layui-icon-upload"></i>导入
            </button>
        </div>
    </div>
    <div id="show_table" lay-filter="show_table">
    </div>
</div>
<div id="addwl" style="display: none;">
    <div class="layui-form tp">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;" for="product_model">型 号</label>
            <div class="layui-input-block" style="width: 250px;">
                <input type="text" id="product_model" name="zc_name" lay-verify="required" placeholder="请输入型号"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;" for="product_level">型号定位</label>
            <div class="layui-input-block" style="width: 250px;">
                <select id="product_level">
                    {% for key, val in level_dic.items() %}
                    <option value="{{key}}">{{val}}</option>
                    {%endfor%}
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="display: none;">
            <label class="layui-form-label" style="width: auto;" for="product_model">渠 道</label>
            <div class="layui-input-block" style="width: 250px;">
                <!--                <input type="text" id="qd" name="zc_name" lay-verify="required" placeholder="请输入渠道"-->
                <!--                       autocomplete="off"-->
                <!--                       class="layui-input">-->
                <select id="qd">
                    {% for key, val in qd_dic.items() %}
                    <option value="{{key}}">{{val}}</option>
                    {%endfor%}
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="display: none;">
            <label class="layui-form-label" style="width: auto;" for="product_model">基 地</label>
            <div class="layui-input-block" style="width: 250px;">
                <!--                <input type="text" id="jd" name="zc_name" lay-verify="required" placeholder="请输入基地"-->
                <!--                       autocomplete="off"-->
                <!--                       class="layui-input">-->
                <select id="jd">
                    {% for key, val in jd_dic.items() %}
                    <option value="{{key}}">{{val}}</option>
                    {%endfor%}
                </select>
            </div>
        </div>
    </div>
</div>
<div style="display: none;" id="show_bind_msg">
    <div id="bind_table" lay-filter="bind_table"></div>
</div>
<div id="addcfram" style="display: none;">
    <div class="layui-form">
        <div id="material_tree"></div>
    </div>
</div>
<div id="editorscale" style="display: none;">
    <div class="layui-form" id="scaleform" style="margin-top: 50px;">

    </div>
</div>
</body>
<script type="text/html" id="operator">
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addc">绑定关系</button>
    <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="scale">比例关系</button>
    <!--    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="execute">添加关系</button>-->
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
</script>
<script>
    layui.use(["table", "jquery", "layer", "laydate", 'tree', 'upload'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let layer = layui.layer;
            let laydate = layui.laydate;
            let tree = layui.tree;
            let upload = layui.upload;
            laydate.render({
                elem: "#log_date_search",
                value: new Date(),
                format: "yyyy-MM",
                type: 'month'
            });

            // 渲染
            upload.render({
                elem: '.demo-class-accept', // 绑定多个元素
                url: '/api/xh/upload_xh', // 此处配置你自己的上传接口即可
                accept: 'file', // 普通文件
                done: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                        })
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                        })
                    }
                }
            });

            tableRender(null);
            treeRender()

            function treeRender() {
                $.post("/api/material/get_material", null, function (res) {
                    tree.render({
                        elem: '#material_tree',
                        data: res,
                        showCheckbox: true,  // 是否显示复选框
                        onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                        id: 'material_tree_id',
                        isJump: true, // 是否允许点击节点时弹出新窗口跳转
                        click: function (obj) {
                            let data = obj.data;  //获取当前点击的节点数据
                            layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                        }
                    })
                })
            }

            function tableRender(param) {
                table.render({
                    elem: "#show_table",
                    method: "post",
                    url: "/api/xh/get_xh_list",
                    where: param,
                    page: true,
                    limit: 8,
                    limits: [8, 10, 20, 30],
                    cols: [[
                        {
                            field: "id",
                            title: "型号编号",
                            width: 150,
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        },
                        {
                            field: "product_model",
                            title: "型 号",
                            width: 200,
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        },
                        // {
                        //     field: "qd",
                        //     title: "渠 道",
                        //     width: 200,
                        //     align: "center",
                        //     style: 'background-color:white;color:gray;opacity:0.9;'
                        // },
                        // {
                        //     field: "jd",
                        //     title: "基 地",
                        //     width: 200,
                        //     align: "center",
                        //     style: 'background-color:white;color:gray;opacity:0.9;'
                        // },
                        {
                            field: "product_level",
                            title: "型号定位",
                            width: 300,
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        },
                        // {
                        //     field: "product_name",
                        //     title: "备注信息",
                        //     align: "center",
                        //     width: 200,
                        //     style: 'background-color:white;color:gray;opacity:0.9;'
                        // },
                        // {
                        //     field: "log_msg",
                        //     title: "日志信息",
                        //     align: "center",
                        //     width: 400,
                        //     style: 'background-color:white;color:red;opacity:0.9;'
                        // },
                        // {
                        //     field: "log_args",
                        //     title: "日志参数",
                        //     align: "center",
                        //     width: 200,
                        //     style: 'background-color:white;color:purple;opacity:0.9;'
                        // }
                        // ,
                        {
                            title: "操 作",
                            toolbar: "#operator",
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;'
                        }
                    ]]
                })
            }

            table.on('tool(show_table)', function (obj) {
                let row_data = obj.data;
                let product_id = row_data["id"]
                if (obj.event === 'del') {
                    let param = {
                        id: row_data["id"]
                    }
                    $.post("/api/xh/del", param, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                tableRender()
                                layer.close(idx);
                            })
                        } else {
                            layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                // tableRender(null)
                            })
                        }
                    })
                }
                if (obj.event === "scale") {
                    let product_model = row_data["product_model"];
                    $.post("/api/material/get_all_connection", {
                        "product_id": product_id
                    }, function (res) {
                        if (res.code === 200) {
                            let con_models = res.data;
                            $.post("/api/material/get_all_material", null, function (res) {
                                if (res.code === 200) {
                                    let el = $("#scaleform");
                                    el.empty();
                                    for (let i = 0; i < res["data"].length; i++) {
                                        let st = ""
                                        let name = res["data"][i]["name"]
                                        let m_id = res["data"][i]["id"]
                                        let scale = 0
                                        let exists = false
                                        let is_show = "disabled"
                                        let relation = ""
                                        for (let j = 0; j < con_models.length; j++) {
                                            let relation_id = con_models[j]["relation"]
                                            if (relation_id === m_id) {
                                                scale = con_models[j]["scale"]
                                                exists = true
                                                break;
                                            }
                                        }
                                        if (exists) {
                                            is_show = ""
                                            relation = ` relation="` + m_id.toString() + `" id="scaleinput" style="border:3px dashed orange" `
                                        }
                                        st += `
                                <div class="layui-inline">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="width: auto;text-align: center;">` + name + `</label>
                                        <div class="layui-input-block" style="width: 200px;">
                                          <input type="number" name="username" ` + is_show + ` lay-verify="required"
                                          placeholder="请输入:` + name + `的比例" ` + relation + ` autocomplete="off" class="layui-input" value="` + scale.toString() + `">
                                        </div>
                                    </div>
                                </div>
                                `
                                        el.append(st)
                                    }
                                    let open_index = layer.open({
                                        type: 1,
                                        content: $('#editorscale'),
                                        title: '型号组成比例',
                                        area: ['600px', '500px'],
                                        btn: ['确定', '取消'],
                                        yes: function (index, layerout) {
                                            let all_in = $('[id="scaleinput"]')
                                            let in_dic = ""
                                            for (let i = 0; i < all_in.length; i++) {
                                                let r_id = $(all_in[i]).attr("relation")
                                                let val = $(all_in[i]).val()
                                                in_dic += r_id.toString() + "," + val.toString() + "|"
                                            }
                                            let param = {
                                                "product_model": product_model,
                                                "key_val": in_dic
                                            }
                                            $.post("/api/xh/editor_relation", param, function (res) {
                                                if (res.code === 200) {
                                                    layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                                        layer.close(open_index)
                                                        tableRender(null)
                                                    })
                                                } else {
                                                    layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                                                        // layer.close(open_index)
                                                        // tableRender(null)
                                                    })
                                                }
                                            })
                                        },
                                        btn2: function (index, layer) {

                                        },
                                        success: function () {

                                        }
                                    })
                                } else {
                                    layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                                        // tableRender(null)
                                    })
                                }
                            })
                        }
                    })

                }
                if (obj.event === 'addc') {

                    //新增关系
                    let open_index = layer.open({
                        type: 1,
                        content: $('#addcfram'),
                        title: '型号组成关系',
                        area: ['500px', '400px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layerout) {
                            let trees = tree.getChecked('material_tree_id');
                            let st = "";
                            if (trees.length > 0) {
                                for (let i = 0; i < trees.length; i++) {
                                    st += trees[i]['id'].toString() + ","
                                }
                            }
                            let param = {
                                "id": row_data["id"],
                                "relation": st,
                                "product_model": row_data["product_model"]
                            }
                            $.post('/api/xh/add_relation', param, function (res) {
                                if (res.code === 200) {
                                    layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                        layer.close(open_index)
                                        search_func();
                                    })
                                } else {
                                    layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                                        // layer.close(open_index)
                                        // tableRender(null)
                                    })
                                }
                            })
                        },
                        btn2: function (index, layer) {

                        },
                        success: function () {
                            tree.reload('material_tree_id', []);
                            $.post("/api/xh/get_relation", {
                                "id": row_data["id"]
                            }, function (res) {
                                if (res.code === 200) {
                                    tree.setChecked('material_tree_id', res.data); // 批量勾选 id 为 1,3 的节点
                                } else {
                                    layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                                        // tableRender(null)
                                    })
                                }
                            })
                            // $.post("/order/get_bind_msg", row_data, function (res) {
                            //     if (res.code === 200) {
                            //
                            //     } else {
                            //         layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                            //             tableRender(null)
                            //         })
                            //     }
                            // })
                        }
                    })
                }
            })

            $("#searchconfig").click(function () {
                search_func();
            })

            function getParam() {
                let product_model = $("#product_model_search").val()
                return {
                    "product_model": product_model
                }
            }

            function search_func() {
                let param = getParam()
                tableRender(param);
            }

            $('#order_no_search').bind('keypress', function (event) {
                if (event.keyCode === 13) {
                    search_func();
                }
            })

            $("#datainit").click(function () {
                /**
                 // 显示加载层
                 // let loadIndex = layer.load(0, {
                 //     shade: [0.5, '#fff'],
                 //     zIndex: layer.zIndex,
                 //     content: "正在订单校验中...请稍后"
                 // });
                 // 在顶层显示加载层
                 // layer.setTop();
                 // $.post("/order/cal/order_cl", {}, function (res) {
                 //     // layer.close(loadIndex);
                 //     if (res.code === 200) {
                 //         layer.msg(res.msg, {icon: 6, time: 3000}, function () {
                 //             tableRender(null)
                 //         })
                 //     } else {
                 //         layer.msg(res.msg, {icon: 2, time: 3000}, function () {
                 //             // tableRender(null)
                 //         })
                 //     }
                 //
                 // })**/

                let idx = layer.open(
                    {
                        type: 1,
                        content: $('#addwl'),
                        title: '新增商品型号',
                        area: ['500px', '400px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layerout) {
                            let zc_name = $("#product_model").val()
                            if (zc_name === undefined || zc_name === "") {
                                layer.msg("型号不能为空", {icon: 2, time: 1500}, function () {
                                    //tableRender(null)
                                })
                                return;
                            }
                            let qd = $("#qd").val()
                            if (qd === undefined || qd === "") {
                                layer.msg("渠道不能为空", {icon: 2, time: 1500}, function () {
                                    //tableRender(null)
                                })
                                return;
                            }
                            let jd = $("#jd").val()
                            if (jd === undefined || jd === "") {
                                layer.msg("基地不能为空", {icon: 2, time: 1500}, function () {
                                    //tableRender(null)
                                })
                                return;
                            }
                            let param = {
                                product_model: zc_name,
                                // qd: qd,
                                // jd: jd,
                                product_level: $("#product_level").val()
                            }
                            $.post("/api/xh/add_xh", param, function (res) {
                                if (res.code === 200) {
                                    layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                        search_func();
                                        layer.close(idx);
                                    })
                                } else {
                                    layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                        // tableRender(null)
                                    })
                                }
                            })
                        },
                        btn2: function (index, layer) {

                        },
                        success: function () {

                        }
                    }
                );
            })
        }
    )


</script>
</html>